<script setup>
import {onMounted, ref} from 'vue'
import http from "@/request/http.js";

const isCollapse = ref(false)

const menuItems = ref([
  { index: '1', title: '首页', icon: 'House' },
  { index: '2', title: '音乐库', icon: 'Headphone' },
  { index: '3', title: '歌手', icon: 'User' },
  { index: '4', title: '歌单', icon: 'List' },
  { index: '5', title: '排行榜', icon: 'Trophy' }
])


// 模拟更多内容数据
const songList = ref([
  { id: 1, name: '歌曲1', artist: '歌手1', duration: '03:45' },
  { id: 2, name: '歌曲2', artist: '歌手2', duration: '04:20' },
  { id: 3, name: '歌曲3', artist: '歌手3', duration: '03:15' },
  { id: 4, name: '歌曲4', artist: '歌手4', duration: '05:10' },
  { id: 5, name: '歌曲5', artist: '歌手5', duration: '03:55' },
  { id: 6, name: '歌曲6', artist: '歌手6', duration: '04:30' },
  { id: 7, name: '歌曲7', artist: '歌手7', duration: '03:25' },
  { id: 8, name: '歌曲8', artist: '歌手8', duration: '04:45' }
])
//数量
const countOfSong=ref();
const countOfArtist=ref();
const countOfPlayList=ref();
//请求
const getCountOfSong =async () => {
 const data=await http.get("test/getCountOfSong");
 countOfSong.value=data.data
}
const getCountOfArtist =async () => {
  const data=await http.get("test/getCountOfArtist");
  countOfArtist.value=data.data
}
const getCountOfPlayList =async () => {
  const data=await http.get("test/getCountOfPlayList");
  countOfPlayList.value=data.data
}

onMounted(async ()=>{
  await getCountOfSong()
  await getCountOfArtist()
  await getCountOfPlayList()
})

</script>

<template>
  <div class="common-layout">
    <el-container class="layout-container">
      <el-header class="header">
        <div class="header-left">
          <h1 class="logo">🎵 音乐管理系统</h1>
        </div>
        <div class="header-right">
          <el-button type="default" text>登录</el-button>
          <el-button type="default" text>注册</el-button>
        </div>
      </el-header>

      <el-container class="main-container">
        <el-aside :width="isCollapse ? '64px' : '200px'" class="aside">
          <div class="aside-header">
            <el-button
                link
                :icon="isCollapse ? 'Expand' : 'Fold'"
                @click="isCollapse = !isCollapse"
                class="collapse-btn"
            />
          </div>

          <el-menu
              default-active="1"
              class="sidebar-menu"
              :collapse="isCollapse"
              background-color="#304156"
              text-color="#bfcbd9"
              active-text-color="#409EFF"
          >
            <el-menu-item
                v-for="item in menuItems"
                :key="item.index"
                :index="item.index"
            >
              <el-icon>
                <component :is="item.icon" />
              </el-icon>
              <template #title>{{ item.title }}</template>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-main class="main-content">
          <div class="content-wrapper">
            <!-- 欢迎卡片 -->
            <el-card class="welcome-card">
              <template #header>
                <div class="card-header">
                  <span>欢迎使用音乐管理系统</span>
                </div>
              </template>
              <div class="welcome-content">
                <el-empty description="暂无数据" :image-size="200">
                  <el-button type="primary">开始探索</el-button>
                </el-empty>
              </div>
            </el-card>

            <!-- 统计卡片 -->
            <div class="stats-cards">
              <el-card class="stat-card" shadow="hover">
                <div class="stat-item">
                  <div class="stat-icon">🎵</div>
                  <div class="stat-info">
                    <div class="stat-number">{{ countOfSong }}</div>
                    <div class="stat-label">总歌曲数</div>
                  </div>
                </div>
              </el-card>

              <el-card class="stat-card" shadow="hover">
                <div class="stat-item">
                  <div class="stat-icon">👤</div>
                  <div class="stat-info">
                    <div class="stat-number">{{ countOfArtist }}</div>
                    <div class="stat-label">歌手数量</div>
                  </div>
                </div>
              </el-card>

              <el-card class="stat-card" shadow="hover">
                <div class="stat-item">
                  <div class="stat-icon">📁</div>
                  <div class="stat-info">
                    <div class="stat-number">{{ countOfPlayList }}</div>
                    <div class="stat-label">歌单数量</div>
                  </div>
                </div>
              </el-card>
            </div>

            <!-- 添加更多内容来产生滚动条 -->
            <el-card class="content-card" shadow="never">
              <template #header>
                <div class="card-header">
                  <span>最新歌曲</span>
                </div>
              </template>
              <el-table :data="songList" stripe class="song-table">
                <el-table-column prop="name" label="歌曲名称" width="200" />
                <el-table-column prop="artist" label="歌手" width="150" />
                <el-table-column prop="duration" label="时长" width="100" />
                <el-table-column label="操作" width="120">
                  <template #default>
                    <el-button size="small" type="primary">播放</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>

            <!-- 底部空白区域 -->
            <div class="bottom-space"></div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.common-layout {
  height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.layout-container {
  height: 100vh;
}

.main-container {
  height: calc(100vh - 60px);
}

.header {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #409EFF, #67C23A);
  color: white;
  padding: 0 20px;
}

.aside {
  height: 100%;
  background-color: #304156;
}

.main-content {
  height: 100%;
  padding: 20px;
  overflow-y: auto;
}

.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 800px; /* 关键：设置最小高度 */
}

.welcome-card {
  margin-bottom: 20px;
  min-height: 300px;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.content-card {
  margin-bottom: 20px;
}

.song-table {
  width: 100%;
}

.bottom-space {
  height: 100px; /* 底部空白区域 */
}

/* 其他样式保持不变 */
.logo {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}

.aside-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #475669;
}

.sidebar-menu {
  border: none;
  height: calc(100% - 60px);
}

.stat-card {
  height: 120px;
}

/* 确保滚动条正常工作 */
.main-content::-webkit-scrollbar {
  width: 8px;
}

.main-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.main-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.main-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>